<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">

    <router-link to="/detail?id=1001">跳到detail</router-link>
    <router-link :to="{ name: 'Detail', query: { id: 123 }}">跳转至detail</router-link>
    <!-- http://localhost:8080/detail?id=123 -->
    <button @click="handleClick">跳转至detail</button>

    <button @click="handleMovie">跳转至movie</button>


  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    
  },
  data() {
    return {
      
    }
  },
  methods: {
    handleClick(){
      this.$router.push({name:'Detail',query:{id:123}})
    },
    handleMovie(){
      // this.$router.push("/movie?id=1001")  //404   path: '/movie/:id', (`/film/${id}`)
      // this.$router.push("/detail?id=1001") //   path: '/detail', //取/id  this.toute.params
      // this.$router.push({name:'Movie',params:{id:123}})   //http://localhost:8080/movie
      this.$router.push("/movie/12143")  //动态路由跳转 //参数在this.$route.param
    }
  },
}
</script>
